<html>
  <head>
    <title>Meaningless text box</title>
    <style type="text/css">
      body
      {
      background: url(https://hbimg.huaban.com/583905c03ff23c7f4318df71fc80ee9743b257b03f8ac-2QdnsZ_fw658) ;
      }h
    </style>
  </head>
  <body style="color: darkorchid">
    <div class="main2">
      <div class="word">
        <div class="title">一个文本框</div>
        <div class="smalltitle">by 蓝鲁晟</div>
      </div>
      <div class="main">
        <div class="row">
          <input
            class="input"
            type="text"
            id="inputtext"
            placeholder="请输入文字"
            onkeyup="keyup(event)"
          />
          <input
            type="button"
            name="bt"
            value="添加"
            onclick="handleClick(event)"
          />
          <input
            type="button"
            name="bt2"
            id="button2"
            value="清除勾选"
            onclick="clearClick(event)"
          />
        </div>
        <hr color="#034473" ;size="2px" ; />
        <div id="todogroup">
          <!-- <div id ="todo0"><input  吃饭</div> -->
          <!-- <div id ="todo9">睡觉</div> -->
        </div>
        <!-- <span style="color: blue"> sad&nbsp;sad </span> -->
        <!-- <div id='xx' onmouseenter="enter('xx')" onmouseleave="leave('xx')">22222</div>-->
      </div>
      <div class="update">
      <div class="word2">更新内容</div>
      <hr color="#034473" ;size="2px" ; />
      <div class="detail">
         1.增加了点击整个todobox复选框的勾选事件<br>
         2.增加了清除全部勾选内容<br></div>
      </div>
    </div>
    
  </body>
  <script lang="javascript">
    var intCnt=0;

    function init(){

    }

    function keyup(e){
      console.log(e);
      if(e.keyCode==13){
        handleClick();
      }
    }


    function handleClick(e){
        console.log('handleClick');
        console.log(e);

        // var temp = document.getElementById("inputtext");
        // console.log(temp.value);
        var temp=getValue();
        var div =document.createElement('div');
        div.innerText =temp;
        // document.getElementById("todogroup").append(div);

        document.getElementById("todogroup").innerHTML +=
            "<div class= 'item' id='todo"
            +intCnt+ "' onclick= 'clickcheck("
            +intCnt+")'><input name='cbox' type = 'checkbox' id = 'todocheck"
            +intCnt+"' onclick= 'clickcheck("
            +intCnt+")'> <div class='item-value'>"
            + temp+ "</div><button class='item-del' type ='button' onclick ='deletByIndex("
            +intCnt+",\""
            + temp+ "\")'>删除</button></div>";
        document.getElementById("inputtext").value="";
        intCnt++;

      //  document.getElementsByClassName("main")[0].style = "background-color: #333333;";
    }

    function clearClick(e){
      console.log('Clear');
      console.log(e);

      var flag = false;
      const r = confirm("是否删除所有选中内容？");
      var list=document.getElementsByName("cbox");
      if (r) {
            alert("删除成功");
            console.log(list.length);

            for (var i = 0; i < list.length; i ++ ) {
              console.log(list[i].id);
              var tmp = list[i].id.toString();
              console.log(tmp.substr(9));
            }

            for(var i=0;i<list.length;i++){

             // console.log(list[i].checked +" " + i);
             // console.log(list[i].id);
              if(list[i].checked==true){
                var tmp = list[i].id.toString();
                /* console.log(tmp.substr(9)); */
                document.getElementById("todo" + tmp.substr(9)).remove();
                i--;
              }
            }
            return true;
        }
      return false;

    }

    function getValue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        return temp.value;
    }

    function deletByIndex(index,word){
    //  console.log(document.getElementById("todo" + index)).innerText;
      // var child = document.getElementById("todo" + index);
      // child.parentNode.removeChild(child)
      if(word=='')word="[空白]";
      const r = confirm("确认删除搜索词: "+word+" ？");
      if (r) {
            alert("删除成功");
            document.getElementById("todo" + index).remove();
            return true;
      }
      return false;

    }

    function  clickcheck(id){
      document.getElementById("todocheck"+id).click();
    }

    function leave (id){
      document.getElementById(id).style='background-color=#ffffff'
    }

    init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .main2 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .word{
      display: flex;
      flex-direction: row;
      margin-bottom: 25px;
    
    }

    .word2{
      color:#034473;
      margin-top: 5px;
      margin-top: 5px;
      font-size: 10px;
    }
    .title {
      color: #fff;
      font-weight: bold;
      font-size: 20px;      
    }

    .detail{
      color: #fff;
      font-size: 10px;
      text-shadow: 1px 1px 2px#000;
      margin-top: 5px;
      margin-top: 5px;
    }

    .smalltitle {
      color: #fff;
      font-size: 10px;

      margin-top:15px ;
      margin-left:10px;
    }

    .main {
      /* background-color: aqua;
      width: 200px;
      height: 200px; */
      padding: 8px;
      border: 0px;
      border-radius: 8px;
      margin: auto;
      background-color: rgba(255, 214, 110, 0.847);
      box-shadow: 0px 0px 17px #fff4c2;
    }

    .update{
      padding: 8px;
      border: 0px;
      border-radius: 8px;
      margin: 10%;
      background-color: rgba(255, 246, 224, 0.705);
      box-shadow: 0px 0px 5px #fff4c2;
    }

    .row {
      display: r;
    }

    .item {
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;

      border-radius: 3px;
      background-color: #fff;
    }

    .item:hover {
      background-color: #dddddd;
      transform: scale(1.2);
      box-shadow: 0px 0px 5px #78ff91;
    }

    .item-value {
      flex-grow: 1;
      color: #000;
    }

    .item-del {
      color: #fff;
      background-color: red;
      border: 0px;
      border-radius: 3px;
      opacity: 0;
    }

    .item:hover .item-del {
      opacity: 1;
    }

    .input {
      padding: 8px;
      outline: none;

      border-radius: 3px;
      border: 2px solid #fff4c2;
    }

    .input:focus {
      box-shadow: 0px 0px 10px #5465ff;
      border: 2px solid #5465ff;
    }
  </style>
</html>
